<template>
  <view
    class="tn-list"
    :class="[listClass]"
    :style="listStyle"
    :hover-class="hoverClass"
    :hover-stay-time="150"
    @tap.stop="handleClick"
  >
    <view class="tn-list__wrap">
      <view class="tn-list__content">
        <slot></slot>
      </view>
      <view
        v-if="iconType !== ''"
        class="tn-list__icon"
        :class="[rightIconClass]"
        :style="rightIconStyle"
      >
        <slot name="icon">
          <tn-icon v-if="iconType === 'icon'" :icon="iconValue" :bold="fontBold"></tn-icon>
        </slot>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { listProps, listEmits } from '../../../types/tn-list'
import { ColorInfo } from '../../../types/tuniao-ui'
import { computed, watchEffect, CSSProperties, useSlots } from 'vue'
import useComponentColor from '../../../libs/hooks/useComponentColor'
import { handleValueWithUnit } from '../../../utils'
import TnIcon from '../../tn-icon/src/Icon.vue'

const props = defineProps(listProps)
const emits = defineEmits(listEmits)
const slots = useSlots()

const { generateColorInfo, splitColorInfo } = useComponentColor()
let componentColorInfo = generateColorInfo(props?.color || '', props?.bgColor || '')
// 监听颜色变化实时修改颜色对应的属性
watchEffect(() => {
  componentColorInfo = generateColorInfo(props?.color || '', props?.bgColor || '')
})

// 解析icon颜色
const iconColor = computed<ColorInfo>(() => {
  return splitColorInfo('color', props?.iconColor || '')
})

// 判断icon类型
const iconType = computed<'icon' | 'slot' | ''>(() => {
  if (slots.icon || (typeof props.icon === 'boolean' && props.icon === true)) {
    return 'slot'
  }
  if (typeof props.icon === 'string' && props.icon !== '') {
    return 'icon'
  }
  return ''
})
const iconValue = computed<string>(() => {
  if (iconType.value === 'icon') {
    return props.icon as string
  }
  return ''
})

// list列表样式
const listStyle = computed<CSSProperties>(() => {
  let style: CSSProperties = {}

  if (props?.fontSize) {
    style.fontSize = handleValueWithUnit(props.fontSize)
  }
  if (componentColorInfo.style?.color) {
    style.color = componentColorInfo.style.color
  }
  if (componentColorInfo.style?.backgroundColor) {
    style.backgroundColor = componentColorInfo.style.backgroundColor
  }

  return Object.assign(style, props.customStyle || {})
})
// 右边icon样式
const rightIconStyle = computed<CSSProperties>(() => {
  let style: CSSProperties = {}
  if (iconColor.value.type === 'style') {
    style.color = iconColor.value.value
  }

  return style
})

// list列表对应类
const listClass = computed<string>(() => {
  let clazz: string[] = []

  if (componentColorInfo.class.length > 0) {
    clazz.push(...componentColorInfo.class)
  }
  if (props?.fontBold) {
    clazz.push('tn-text-bold')
  }
  // 设置默认type
  if (props?.type) {
    clazz.push(`tn-type-${props.type}`)
  }
  // 设置形状
  if (props?.shape) {
    clazz.push(`tn-list--${props.shape}`)
  }

  // 设置底边
  if (props?.bottomLine) {
    clazz.push('tn-list--bottom-line')
    if (props?.lineOffset) {
      clazz.push('tn-list--bottom-line--center')
    }
  }

  return clazz.join(' ')
})
// 右边icon对应类
const rightIconClass = computed<string>(() => {
  let clazz: string[] = []
  if (iconColor.value.type === 'class') {
    clazz.push(iconColor.value.value)
  }
  return clazz.join(' ')
})

// 处理点击事件
const handleClick = () => {
  emits('click', props.index)
}
</script>

<script lang="ts">
export default {
  options: {
    // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
    virtualHost: true
  }
}
</script>

<style lang="scss" scoped>
@import '../../../theme.scss';

.tn-list {
  position: relative;
  padding: 24rpx 30rpx;
  overflow: hidden;
  width: 100%;
  background-color: #FFFFFF;

  &__wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  &__content {
    flex: 1;
    width: 100%;
  }

  /* 内置形状 start */
  &--round {
    border-radius: 12rpx;
  }
  /* 内置形状 end */

  /* 底部横线 start */
  &--bottom-line {
    position: relative;
    &::after {
      content: '';
      position: absolute;
      bottom: 1rpx;
      left: 0;
      width: 100%;
      height: 1rpx;
      background-color: $tn-border-solid-color;
    }

    &--center {
      &::after {
        left: 50%;
        width: calc(100% - 60rpx);
        transform: translateX(-50%);
      }
    }
  }
  /* 底部横线 end */
}
</style>
